<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        :root {
            --primary-color: #409EFF;
            --secondary-color: #67C23A;
            --danger-color: #F56C6C;
            --background-color: #f5f7fa;
            --card-color: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
            background-color: var(--background-color);
            color: #333;
        }

        .app-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .header {
            background-color: var(--primary-color);
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            font-size: 1.5rem;
            font-weight: 500;
        }

        .main-content {
            display: flex;
            flex: 1;
            padding: 20px;
            gap: 20px;
        }

        .filter-section {
            width: 300px;
            background-color: var(--card-color);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        }

        .data-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: var(--card-color);
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        }

        .table-container {
            flex: 1;
            background-color: var(--card-color);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .el-table {
            width: 100%;
        }

        .action-button {
            margin-left: 10px;
        }

        .detail-section {
            width: 350px;
            background-color: var(--card-color);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
        }

        .detail-header {
            font-size: 1.2rem;
            font-weight: 500;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .form-section {
            flex: 1;
            overflow-y: auto;
            padding-right: 10px;
        }

        .form-row {
            margin-bottom: 20px;
        }

        .form-row label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #606266;
        }

        .footer-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .tab-container {
            margin-top: 20px;
        }

        .tab-panel {
            padding: 15px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <header class="header">
            <h1>学生信息管理系统</h1>
            <el-button type="primary" @click="showAddDialog = true">新增学生</el-button>
        </header>

        <div class="main-content">
            <!-- 左侧筛选区域 -->
            <div class="filter-section">
                <h3>筛选条件</h3>
                <el-form :model="searchForm" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="searchForm.name" placeholder="输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="学号">
                        <el-input v-model="searchForm.code" placeholder="输入学号"></el-input>
                    </el-form-item>
                    <el-form-item label="学校">
                        <el-input v-model="searchForm.school" placeholder="输入学校"></el-input>
                    </el-form-item>
                    <el-form-item label="选考科目">
                        <el-select v-model="searchForm.selectedSubjects" multiple placeholder="选择科目">
                            <el-option label="物理" value="物理"></el-option>
                            <el-option label="化学" value="化学"></el-option>
                            <el-option label="生物" value="生物"></el-option>
                            <el-option label="历史" value="历史"></el-option>
                            <el-option label="地理" value="地理"></el-option>
                            <el-option label="思想政治" value="思想政治"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" @click="searchStudents">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </el-form>
            </div>

            <!-- 中央数据区域 -->
            <div class="data-section">
                <div class="action-bar">
                    <div>
                        <el-button type="primary" @click="exportData">导出数据</el-button>
                    </div>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.currentPage"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pagination.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>

                <div class="table-container">
                    <el-table :data="students" border style="width: 100%" highlight-current-row @current-change="handleRowClick">
                        <el-table-column prop="code" label="学号" width="100"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                        <el-table-column prop="school" label="学校" width="180"></el-table-column>
                        <el-table-column prop="selectedSubjects" label="选考科目" width="150">
                            <template #default="scope">
                                <el-tag size="small" v-for="subject in scope.row.selectedSubjects" :key="subject" style="margin-right: 5px;">
                                    {{ subject }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="score" label="分数" width="80"></el-table-column>
                        <el-table-column prop="phone" label="电话" width="150"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="150">
                            <template #default="scope">
                                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <!-- 右侧详情区域 -->
            <div class="detail-section" v-if="currentStudent">
                <div class="detail-header">
                    {{ currentStudent.name }} - 详细信息
                </div>
                <div class="form-section">
                    <el-tabs v-model="activeTab" class="tab-container">
                        <el-tab-pane label="基本信息" name="basic">
                            <div class="tab-panel">
                                <div class="form-row">
                                    <label>学号</label>
                                    <el-input v-model="currentStudent.code" disabled></el-input>
                                </div>
                                <div class="form-row">
                                    <label>姓名</label>
                                    <el-input v-model="currentStudent.name"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>选考科目</label>
                                    <el-select v-model="currentStudent.selectedSubjects" multiple>
                                        <el-option v-for="subject in subjects" :key="subject" :label="subject" :value="subject"></el-option>
                                    </el-select>
                                </div>
                                <div class="form-row">
                                    <label>分数</label>
                                    <el-input v-model="currentStudent.score"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>位次</label>
                                    <el-input v-model="currentStudent.rank"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>学校</label>
                                    <el-input v-model="currentStudent.school"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>电话</label>
                                    <el-input v-model="currentStudent.phone"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>性别</label>
                                    <el-input v-model="currentStudent.gender"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>年龄</label>
                                    <el-input v-model="currentStudent.age"></el-input>
                                </div>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane label="个人特征" name="personal">
                            <div class="tab-panel">
                                <div class="form-row">
                                    <label>身高</label>
                                    <el-input v-model="currentStudent.height" placeholder="单位：厘米"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>体重</label>
                                    <el-input v-model="currentStudent.weight" placeholder="单位：公斤"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>民族</label>
                                    <el-input v-model="currentStudent.ethnic"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>家庭住址</label>
                                    <el-input v-model="currentStudent.address" type="textarea" rows="2"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>兴趣爱好</label>
                                    <el-input v-model="currentStudent.hobby" type="textarea" rows="2"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>性格特点</label>
                                    <el-input v-model="currentStudent.character" type="textarea" rows="2"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>体检受限</label>
                                    <el-input v-model="currentStudent.physicalRestriction" type="textarea" rows="2"></el-input>
                                </div>
                            </div>
                        </el-tab-pane>

                        <el-tab-pane label="升学意向" name="preference">
                            <div class="tab-panel">
                                <div class="form-row">
                                    <label>家长期望</label>
                                    <el-input v-model="currentStudent.parentExpectation" type="textarea" rows="2"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>家庭资源</label>
                                    <el-input v-model="currentStudent.familyResource" type="textarea" rows="2"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>意向地域</label>
                                    <el-input v-model="currentStudent.preferredRegion"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>意向职业</label>
                                    <el-input v-model="currentStudent.preferredOccupation"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>意向大学</label>
                                    <el-input v-model="currentStudent.preferredUniversity"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>意向专业</label>
                                    <el-input v-model="currentStudent.preferredMajor"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>不学专业</label>
                                    <el-input v-model="currentStudent.excludedMajor"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>不去地域</label>
                                    <el-input v-model="currentStudent.excludedRegion"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>备注</label>
                                    <el-input v-model="currentStudent.remark" type="textarea" rows="3"></el-input>
                                </div>
                                <div class="form-row">
                                    <label>指导老师</label>
                                    <el-input v-model="currentStudent.instructor"></el-input>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="footer-buttons">
                    <el-button type="primary" @click="saveStudent">保存</el-button>
                    <el-button @click="closeDetail">关闭</el-button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增学生对话框 -->
    <el-dialog v-model="showAddDialog" title="新增学生信息" width="600px">
        <el-form :model="newStudent" label-width="120px">
            <el-form-item label="学号" required>
                <el-input v-model="newStudent.code"></el-input>
            </el-form-item>
            <el-form-item label="姓名" required>
                <el-input v-model="newStudent.name"></el-input>
            </el-form-item>
            <el-form-item label="选考科目">
                <el-select v-model="newStudent.selectedSubjects" multiple>
                    <el-option v-for="subject in subjects" :key="subject" :label="subject" :value="subject"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学校">
                <el-input v-model="newStudent.school"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="newStudent.phone"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="showAddDialog = false">取消</el-button>
            <el-button type="primary" @click="addStudent">确认添加</el-button>
        </template>
    </el-dialog>
</div>

<script>
    const { createApp, ref, reactive, onMounted } = Vue;
    const { ElMessage, ElMessageBox } = ElementPlus;

    createApp({
        setup() {
            // 科目列表
            const subjects = ref([
                "物理", "化学", "生物", "历史", "地理", "思想政治"
            ]);

            // 学生数据
            const students = ref([]);
            const currentStudent = ref(null);
            const newStudent = ref({
                code: '',
                name: '',
                selectedSubjects: [],
                score: '',
                rank: '',
                school: '',
                phone: '',
                gender: '',
                age: '',
                height: '',
                weight: '',
                ethnic: '',
                parent: '',
                address: '',
                hobby: '',
                character: '',
                physicalRestriction: '',
                parentExpectation: '',
                familyResource: '',
                preferredRegion: '',
                preferredOccupation: '',
                preferredUniversity: '',
                preferredMajor: '',
                excludedMajor: '',
                excludedRegion: '',
                remark: '',
                instructor: ''
            });

            // UI状态
            const showAddDialog = ref(false);
            const activeTab = ref('basic');
            const searchForm = reactive({
                name: '',
                code: '',
                school: '',
                selectedSubjects: []
            });

            // 分页设置
            const pagination = reactive({
                currentPage: 1,
                pageSize: 10,
                total: 0
            });

            // 初始化函数
            const fetchStudents = async () => {
                try {
                    // 这里应该是API调用，现在模拟数据
                    // const response = await axios.get('/api/students', {
                    //     params: {
                    //         ...searchForm,
                    //         page: pagination.currentPage,
                    //         size: pagination.pageSize
                    //     }
                    // });

                    // 模拟API返回数据
                    const mockData = [
                        {
                            id: 1,
                            code: '2023001',
                            name: '张三',
                            selectedSubjects: ['物理', '化学'],
                            score: '650',
                            rank: '1200',
                            school: '第一中学',
                            phone: '13800138000',
                            gender: '男',
                            age: '18',
                            height: '178',
                            weight: '65',
                            ethnic: '汉族',
                            parent: '张先生',
                            address: '北京市海淀区',
                            hobby: '篮球、编程',
                            character: '开朗、认真',
                            physicalRestriction: '无',
                            parentExpectation: '计算机相关专业',
                            familyResource: '良好',
                            preferredRegion: '北京、上海',
                            preferredOccupation: '软件工程师',
                            preferredUniversity: '清华大学',
                            preferredMajor: '计算机科学与技术',
                            excludedMajor: '医学',
                            excludedRegion: '偏远地区',
                            remark: '优秀学生',
                            instructor: '李老师'
                        },
                        {
                            id: 2,
                            code: '2023002',
                            name: '李四',
                            selectedSubjects: ['生物', '历史'],
                            score: '640',
                            rank: '1500',
                            school: '第二中学',
                            phone: '13900139000',
                            gender: '女',
                            age: '18',
                            height: '165',
                            weight: '50',
                            ethnic: '回族',
                            parent: '李女士',
                            address: '上海市浦东新区',
                            hobby: '绘画、音乐',
                            character: '细心、耐心',
                            physicalRestriction: '无',
                            parentExpectation: '艺术设计专业',
                            familyResource: '良好',
                            preferredRegion: '上海、杭州',
                            preferredOccupation: '设计师',
                            preferredUniversity: '复旦大学',
                            preferredMajor: '视觉传达设计',
                            excludedMajor: '工科',
                            excludedRegion: '北方城市',
                            remark: '艺术特长生',
                            instructor: '王老师'
                        }
                    ];

                    students.value = mockData;
                    pagination.total = mockData.length;
                    ElMessage.success('数据加载成功');
                } catch (error) {
                    ElMessage.error('数据加载失败: ' + error.message);
                }
            };

            // 搜索学生
            const searchStudents = () => {
                pagination.currentPage = 1;
                fetchStudents();
            };

            // 重置搜索
            const resetSearch = () => {
                searchForm.name = '';
                searchForm.code = '';
                searchForm.school = '';
                searchForm.selectedSubjects = [];
                fetchStudents();
            };

            // 分页处理
            const handleSizeChange = (size) => {
                pagination.pageSize = size;
                fetchStudents();
            };

            const handleCurrentChange = (page) => {
                pagination.currentPage = page;
                fetchStudents();
            };

            // 表格行点击处理
            const handleRowClick = (row) => {
                currentStudent.value = row ? {...row} : null;
            };

            // 编辑按钮处理
            const handleEdit = (row) => {
                currentStudent.value = {...row};
            };

            // 删除学生
            const handleDelete = (row) => {
                ElMessageBox.confirm(`确定要删除学生 ${row.name} (${row.code}) 吗？`, '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    try {
                        // 调用删除API
                        // await axios.delete(`/api/students/${row.id}`);
                        ElMessage.success('删除成功');
                        fetchStudents();
                    } catch (error) {
                        ElMessage.error('删除失败: ' + error.message);
                    }
                }).catch(() => {
                    // 用户取消删除
                });
            };

            // 添加学生
            const addStudent = async () => {
                try {
                    // 调用添加API
                    // await axios.post('/api/students', newStudent.value);
                    ElMessage.success('添加成功');
                    showAddDialog.value = false;
                    fetchStudents();

                    // 重置表单
                    newStudent.value = {
                        code: '',
                        name: '',
                        selectedSubjects: [],
                        score: '',
                        rank: '',
                        school: '',
                        phone: '',
                        gender: '',
                        age: '',
                        height: '',
                        weight: '',
                        ethnic: '',
                        parent: '',
                        address: '',
                        hobby: '',
                        character: '',
                        physicalRestriction: '',
                        parentExpectation: '',
                        familyResource: '',
                        preferredRegion: '',
                        preferredOccupation: '',
                        preferredUniversity: '',
                        preferredMajor: '',
                        excludedMajor: '',
                        excludedRegion: '',
                        remark: '',
                        instructor: ''
                    };
                } catch (error) {
                    ElMessage.error('添加失败: ' + error.message);
                }
            };

            // 保存学生信息
            const saveStudent = async () => {
                try {
                    // 调用更新API
                    // await axios.put(`/api/students/${currentStudent.value.id}`, currentStudent.value);
                    ElMessage.success('保存成功');
                    fetchStudents();
                } catch (error) {
                    ElMessage.error('保存失败: ' + error.message);
                }
            };

            // 关闭详情面板
            const closeDetail = () => {
                currentStudent.value = null;
            };

            // 导出数据
            const exportData = () => {
                ElMessage.info('导出功能待实现');
                // 这里实现导出到Excel的功能
            };

            // 初始化加载数据
            onMounted(() => {
                fetchStudents();
            });

            return {
                subjects,
                students,
                currentStudent,
                newStudent,
                showAddDialog,
                activeTab,
                searchForm,
                pagination,
                searchStudents,
                resetSearch,
                handleSizeChange,
                handleCurrentChange,
                handleRowClick,
                handleEdit,
                handleDelete,
                addStudent,
                saveStudent,
                closeDetail,
                exportData
            };
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>